<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="th/include/common_head :: head(~{::title}, ~{::link}, ~{::style})">
    <title>菜单管理-菜单项</title>
    <link type="text/css" rel="stylesheet" th:href="@{${skinPath} + '/css.css'}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/skin/common/organize.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/js/jstree/themes/default/style.css}"/>
    <style>
        body {
            overflow-y: auto;
        }
        td {
            height: 20px;
        }
        html {
            height: 100%;
            margin: 0;
            overflow-y: hidden;
        }
    </style>
</head>
<body>
<div class="organize-leftbox">
    <div class="organize-btn" onclick="add()"><img src="../skin/images/organize/btnicon-add.png" width="20" height="20"/>增加</div>
    <div class="organize-btn" onclick="modify()"><img src="../skin/images/organize/btnicon-alter.png" width="20" height="20"/>修改</div>
    <div class="organize-btn" onclick="del()"><img src="../skin/images/organize/btnicon-del.png" alt="" width="20" height="20"/>删除</div>
</div>
<table cellSpacing=0 cellPadding=0 width="95%" align=center>
    <TBODY>
    <TR>
        <TD height=200 valign="top">
            <div id="departmentTree"></div>
        </TD>
    </TR>
    </TBODY>
</table>
</body>
<script type="text/javascript" th:src="@{'/js/jquery.my.js'}"></script>
<script type="text/javascript" th:src="@{'/js/jstree/jstree.js'}"></script>
<script type="text/javascript" th:src="@{'/js/jquery.toaster.js'}"></script>
<script type="text/javascript" th:inline="javascript">
    var selectNodeId, selectNodeName;
    var inst, obj;
    var node;
    var code;
    var myjsTree;
    $(function () {
        myjsTree = $('#departmentTree')
            .jstree({
                "core": {
                    "data":  [(${jsonData})],
                    "themes": {
                        "theme": "default",
                        "dots": true,
                        "icons": true
                    },
                    "check_callback": true,
                },
                "ui": {"initially_select": ["root"]},
                "plugins": ["unique", "dnd", "wholerow", "themes", "ui", "contextmenu", "types", "crrm", "state"],
                "contextmenu": {	//绑定右击事件
                    "items": {
                        "create": {
                            "label": "增加",
                            "icon": "../js/jstree/themes/default/tree_icon_add.png",
                            "action": function (data) {
                                inst = $.jstree.reference(data.reference);
                                node = inst.get_node(data.reference);
                                selectNodeId = node.id;
                                selectNodeName = node.text;
                                window.parent.rightFrame.location.href = "addMenu.do?parentCode=" + selectNodeId;
                            }
                        },
                        "rename": {
                            "label": "修改",
                            "icon": "../js/jstree/themes/default/tree_icon_alter.png",
                            "action": function (data) {
                                inst = $.jstree.reference(data.reference);
                                node = inst.get_node(data.reference);
                                selectNodeId = node.id;
                                selectNodeName = node.text;
                                window.parent.rightFrame.location.href = "editMenu.do?code=" + selectNodeId;
                            }
                        },
                        "remove": {
                            "label": "删除",
                            "icon": "../js/jstree/themes/default/tree_icon_close.png",
                            "action": function (data) {
                                inst = $.jstree.reference(data.reference);
                                node = inst.get_node(data.reference);
                                selectNodeId = node.id;
                                selectNodeName = node.text;
                                deleteLeaf(selectNodeId, inst, node);
                            }
                        }
                    }
                }
            }).bind('move_node.jstree', function (e, data) {//绑定移动节点事件
                //data.node.id移动节点的id
                //data.parent移动后父节点的id
                //data.position移动后所在父节点的位置，第一个位置为0
                node = data.node;
                $.ajax({
                    type: "post",
                    url: "moveMenu.do",
                    dataType: "json",
                    data: {
                        code: data.node.id + "",
                        parentCode: data.parent + "",
                        position: data.position + ""
                    },
                    success: function (data, status) {
                        if (data.ret == 0) {
                            jAlert(data.msg, [[#{prompt}]]);
                        }
                        else {
                            setToaster(data.msg);
                        }
                    },
                    complete: function (XMLHttpRequest, status) {
                    },
                    error: function (XMLHttpRequest, textStatus) {
                        alert(XMLHttpRequest.responseText);
                    }
                });
            }).bind('select_node.jstree', function (e, data) {     //绑定选中事件
                if (data.event) {
                    // 点击了鼠标右键
                    if (data.event.button == 2) {
                        return;
                    }
                }

                node = data.node;
                selectNodeName = data.node.text;
                selectNodeId = data.node.id;
                window.parent.rightFrame.location.href = "editMenu.do?code=" + selectNodeId;
            }).bind('click.jstree', function (event) {

            }).bind('ready.jstree', function () {
                positionNode("[(${nodeSelected})]");

                [# th:each="menu, stat : ${all}"]
                    [# th:if="!${menu.isUse}" ]
                    setNode([[${menu.code}]], false);
                    [/]
                [/]
            });

        setToaster("右键菜单可管理或拖动");
    });

    function setNode(code, isUse, name) {
        if (name != null) {
            // 需放在前面，因为set_text会覆盖样式
            myjsTree.jstree("set_text", code, name);
        }
        if (isUse) {
            $("#" + code + " a").first().css("color", "#000000");
            // $("#" + code + " a").first().removeClass("nodeNotUse"); // 无效
        } else {
            // $("#" + code + " a").first().addClass("nodeNotUse"); // 无效
            $("#" + code + " a").first().css("color", "#cccccc");
        }
    }

    //定位节点 myId=code
    function positionNode(myId) {
        myjsTree.jstree("deselect_all");
        myjsTree.jstree("select_node", myId);
    }

    function deleteLeaf(code) {
        if ("root" == code) {
            setToaster("根节点不能被删除");
            return;
        }
        window.parent.rightFrame.jConfirm("您确定要删除吗?", "提示", function (r) {
            if (!r) {
                return;
            } else {
                $.ajax({
                    type: "post",
                    url: "delMenu.do",
                    dataType: "json",
                    data: {
                        code: code
                    },
                    beforeSend: function (XMLHttpRequest) {
                        // parent.parent.showLoading();
                    },
                    success: function (data, status) {
                        if (data.ret == 1) {
                            var node = myjsTree.jstree("get_node", code);
                            myjsTree.jstree('delete_node', node);
                            window.parent.rightFrame.location.reload();
                        } else {
                            window.parent.rightFrame.jAlert(data.msg, "提示");
                        }
                        positionNode(data.selectCode);
                    },
                    complete: function (XMLHttpRequest, status) {
                        // parent.parent.hiddenLoading();
                        // shrink();
                    },
                    error: function (XMLHttpRequest, textStatus) {
                        alert(XMLHttpRequest.responseText);
                    }
                });
            }
        })
    }

    function add() {
        if (selectNodeId == undefined) {
            setToaster("请选择操作节点");
            return;
        }
        window.parent.rightFrame.location.href = "addMenu.do?parentCode=" + selectNodeId;
    }

    function modify() {
        if (selectNodeId == undefined) {
            setToaster("请选择操作节点");
            return;
        }
        window.parent.rightFrame.location.href = "editMenu.do?code=" + selectNodeId;
    }

    function del() {
        if (selectNodeId == undefined) {
            setToaster("请选择操作节点");
            return;
        }
        deleteLeaf(selectNodeId);
    }

    function setToaster(mess) {
        $.toaster({priority: 'info', message: mess});
    }
</script>
</html>